/*------------------------------------------------------
  MIXINS
-------------------------------------------------------*/
//abandoned theme
$color-lighter-abandoned: #7e798f;
$color-light-abandoned: #454152;
$color-med-abandoned: #1f1b2c;
$color-dark-abandoned: #171226;
$color-darker-abandoned: #0a0514;

//chaotic theme
$color-lighter-chaotic: #a2b3ae;
$color-light-chaotic: #69877d;
$color-med-chaotic: #45695d;
$color-dark-chaotic: #26453b;
$color-darker-chaotic: #113a2d;

//frigid theme
$color-lighter-frigid: #c0cdd4;
$color-light-frigid: #5d829b;
$color-med-frigid: #2f5d7c;
$color-dark-frigid: #14415f;
$color-darker-frigid: #05283f;

//haven theme
$color-lighter-haven: #75aab6;
$color-light-haven: #2f7591;
$color-med-haven: #1d5372;
$color-dark-haven: #053247;
$color-darker-haven: #001d2b;

// marine theme (default)
$color-lighter: #8e9fc0;
$color-light: #536892;
$color-med: #2e4372;
$color-dark: #152a55;
$color-darker: #061639;

//shrouded theme
$color-lighter-shrouded: #22bec3;
$color-light-shrouded: #302d39;
$color-med-shrouded: #121019;
$color-dark-shrouded: #0f0b18;
$color-darker-shrouded: #0a0613;

//tempestuous theme
$color-lighter-tempestuous: #858d9e;
$color-light-tempestuous: #5e687e;
$color-med-tempestuous: #3e4960;
$color-dark-tempestuous: #253046;
$color-darker-tempestuous: #121a2b;

//volcanic theme
$color-lighter-volcanic: #cf9d9d;
$color-light-volcanic: #8f5252;
$color-med-volcanic: #681e1e;
$color-dark-volcanic: #521212;
$color-darker-volcanic: #2b0707;

// -- END OF THEMES --

$color-danger-lighter: #975f5f;
$color-danger-light: #714141;
$color-danger-med: #6b2b2b;
$color-danger-dark: #5c1919;
$color-danger-darker: #450808;

$color-essence: #ace3d1;
$color-numen: #ffffff;

$color-error: #e03030;
$color-error-bg: #800000;

$color-discovery: #ace3d1;
$color-discovery-dark: darken(#ace3d1, 20%);
$color-discovery-dark2: darken(#ace3d1, 35%);
$color-discovery-dark3: darken(#ace3d1, 50%);
$color-discovery-dark4: darken(#ace3d1, 65%);

$color-text: white;

$sidebar-width: 25%;

// I love less for this alone
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

@mixin box-shadow($x: 0, $y: 0, $blur: 1px, $spread: 1px, $color: #000) {
    -webkit-box-shadow: $x $y $blur $spread $color;
    -moz-box-shadow: $x $y $blur $spread $color;
    box-shadow: $x $y $blur $spread $color;
}

@mixin clear-box-shadow() {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

@mixin box-shadow-inset($x: 0, $y: 0, $blur: 1px, $spread: 1px, $color: #000) {
    -webkit-box-shadow: $x $y $blur $spread $color inset;
    -moz-box-shadow: $x $y $blur $spread $color inset;
    box-shadow: $x $y $blur $spread $color inset;
}

@mixin translate($x, $y) {
    -webkit-transform: translateX($x) translateY($y);
    -moz-transform: translateX($x) translateY($y);
    -ms-transform: translateX($x) translateY($y);
    -o-transform: translateX($x) translateY($y);
    transform: translateX($x) translateY($y);
}

@mixin opacity($opacity: 0.5) {
    -webkit-opacity: $opacity;
    -moz-opacity: $opacity;
    opacity: $opacity;
}

@mixin transition($arguments...) {
    -webkit-transition: $arguments;
    -moz-transition: $arguments;
    -o-transition: $arguments;
    -ms-transition: $arguments;
    transition: $arguments;
}

@mixin no-select() {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fill-available-width {
    width: 100%;
    width: fill-available;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
}

@mixin multi-column-list($count: 2, $separation: 5px) {
    -moz-column-count: $count;
    -moz-column-gap: $separation;
    -webkit-column-count: $count;
    -webkit-column-gap: $separation;
    column-count: $count;
    column-gap: $separation;
}

@mixin pipe-separators() {
    list-style-type: none;
    display: inline;

    &:before {
        content: " | ";
    }

    &:first-child:before {
        content: none;
    }
}

.clear-fix {
    display: block;
    zoom: 1;

    &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

.bold {
    font-weight: bold;
}

/*------------------------------------------------------
  CSS VARIABLES FOR THEMES
-------------------------------------------------------*/

:root {
    --color-lighter: #{$color-lighter};
    --color-light: #{$color-light};
    --color-med: #{$color-med};
    --color-dark: #{$color-dark};
    --color-darker: #{$color-darker};
    --color-title: #{rgba(red($color-med), green($color-med), blue($color-med), 0.2)};

    :not(.no-theme) {
        &.abandoned {
            --color-lighter: #{$color-lighter-abandoned};
            --color-light: #{$color-light-abandoned};
            --color-med: #{$color-med-abandoned};
            --color-dark: #{$color-dark-abandoned};
            --color-darker: #{$color-darker-abandoned};
            --color-title: #{rgba(red($color-med-abandoned), green($color-med-abandoned), blue($color-med-abandoned), 0.2)};
        }
        &.chaotic {
            --color-lighter: #{$color-lighter-chaotic};
            --color-light: #{$color-light-chaotic};
            --color-med: #{$color-med-chaotic};
            --color-dark: #{$color-dark-chaotic};
            --color-darker: #{$color-darker-chaotic};
            --color-title: #{rgba(red($color-med-chaotic), green($color-med-chaotic), blue($color-med-chaotic), 0.2)};
        }
        &.frigid {
            --color-lighter: #{$color-lighter-frigid};
            --color-light: #{$color-light-frigid};
            --color-med: #{$color-med-frigid};
            --color-dark: #{$color-dark-frigid};
            --color-darker: #{$color-darker-frigid};
            --color-title: #{rgba(red($color-med-frigid), green($color-med-frigid), blue($color-med-frigid), 0.2)};
        }
        &.haven {
            --color-lighter: #{$color-lighter-haven};
            --color-light: #{$color-light-haven};
            --color-med: #{$color-med-haven};
            --color-dark: #{$color-dark-haven};
            --color-darker: #{$color-darker-haven};
            --color-title: #{rgba(red($color-med-haven), green($color-med-haven), blue($color-med-haven), 0.2)};
        }
        &.shrouded {
            --color-lighter: #{$color-lighter-shrouded};
            --color-light: #{$color-light-shrouded};
            --color-med: #{$color-med-shrouded};
            --color-dark: #{$color-dark-shrouded};
            --color-darker: #{$color-darker-shrouded};
            --color-title: #{rgba(red($color-med-shrouded), green($color-med-shrouded), blue($color-med-shrouded), 0.2)};
        }
        &.tempestuous {
            --color-lighter: #{$color-lighter-tempestuous};
            --color-light: #{$color-light-tempestuous};
            --color-med: #{$color-med-tempestuous};
            --color-dark: #{$color-dark-tempestuous};
            --color-darker: #{$color-darker-tempestuous};
            --color-title: #{rgba(red($color-med-tempestuous), green($color-med-tempestuous), blue($color-med-tempestuous), 0.2)};
        }
        &.volcanic {
            --color-lighter: #{$color-lighter-volcanic};
            --color-light: #{$color-light-volcanic};
            --color-med: #{$color-med-volcanic};
            --color-dark: #{$color-dark-volcanic};
            --color-darker: #{$color-darker-volcanic};
            --color-title: #{rgba(red($color-med-volcanic), green($color-med-volcanic), blue($color-med-volcanic), 0.2)};
        }
    }
}

/*------------------------------------------------------
  ACTUAL CSS RULES SORTA
-------------------------------------------------------*/

html {
    min-height: 100%;
}

body {
    color: $color-text;
    background-color: var(--color-darker);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13pt;
    text-align: center;
    min-height: 100%;
    overflow-y: auto;
}

::-webkit-scrollbar {
    width: initial; /* without this you can't change any properties */
}

::-webkit-scrollbar-track {
    background: var(--color-med);
}

.gateway::-webkit-scrollbar-track {
    background: $color-discovery-dark2;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-light);
}

.gateway::-webkit-scrollbar-thumb {
    background-color: $color-discovery-dark;
}

div {
    padding: 0;
    margin: 0;
}

a {
    &:active,
    &:hover,
    &:visited,
    &:link {
        color: var(--color-lighter);
    }

    &:hover {
        filter: brightness(125%);
    }

    &:active {
        filter: brightness(135%);
    }
}

h1 {
    color: var(--color-lighter);
    filter: brightness(130%);
    font-size: 2em;
    text-shadow: 0 0 0.3em var(--color-darker);
}

h2 {
    color: var(--color-lighter);
    font-size: 1.3em;
    text-shadow: 0 0 0.3em var(--color-darker);
}

h3 {
    color: var(--color-lighter);
    font-size: 1.1em;
    text-align: center;
    text-shadow: 0 0 0.3em var(--color-darker);
}

h4 {
    color: var(--color-lighter);
    font-size: 0.8em;
    text-align: center;
    text-shadow: 0 0 0.3em var(--color-darker);
}

#shareWrapper {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    text-align: center;
    margin-top: 0.8em;
    margin-bottom: 0.2em;
    background: var(--color-med);

    @include border-radius(3px);
    @include box-shadow(0, 0, 2px, 2px, var(--color-med));
}

#wrapper {
    background-color: var(--color-dark);
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5em;
    padding: 10px;
    @include border-radius(10px);
    height: 100%;

    min-height: 90vh;
    display: flex;
    flex-direction: column;

    #game {
        flex: 1 0 auto;
    }

    #devs {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    #devs > ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #devs tr {
        text-align: right;

        td {
            padding-left: 1rem;
            padding-right: 1rem;
            width: 50%;
        }

        td:nth-child(2) {
            text-align: left;
        }
    }

    #copyright {
        flex-shrink: 0;
    }

    &.topLogActive {
        margin-top: 4.8em;
    }

    &.notMinimized {
        margin-top: 0;
    }
}

pre {
    text-align: left;
}

#game {
    display: none;
}

.section {
    @include border-radius(10px);
    padding: 5px;
    overflow: hidden;
}

.inner-section {
    //border: 2px solid var(--color-med);
    padding: 5px;
    margin: 5px;
}

.click-passthrough {
    pointer-events: none;
}

#title {
    clear: both;
    @extend .section;
    text-shadow: 2px 2px 3px var(--color-darker);
    margin-bottom: 1em;
    box-shadow: 0 4px 4px 4px var(--color-darker);
    background-image: url("../img/sharklogo.png");
    background-position: center;
    background-repeat: no-repeat;

    &.radical {
        background-image: url("../img/sharklogo_radical.png");
    }

    h1 {
        //text-align: left;
        margin: 0.1em auto 0.3em auto;
    }

    h2 {
        text-align: left;
        margin: 0.2em;
    }

    h4 {
        margin: 0.2em auto 1.5em;
    }
}

.top-bar {
    margin-top: 35px;

    #title {
        padding: 0;
        width: 100%;
        height: 4.3em;
        position: fixed;
        background-image: none;
        font-size: initial;
        left: 0;
        top: 0;
        box-shadow: none;
        margin-bottom: 0;
        z-index: 2;
        @include border-radius(0);
        @extend .click-passthrough;

        &.biggerTitleDiv {
            height: 13em;
        }

        #titlebar {
            width: 100%;
            @extend .click-passthrough;
        }

        #gameName,
        #versionNumber,
        #updateGame {
            display: none;
            pointer-events: all;
        }

        #titlemenu,
        #subtitlemenu {
            pointer-events: all;
            float: left;
            font-size: initial;
            height: auto;
            margin: 0.2em 0.8em;
            overflow: hidden;
            text-align: center;
            font-weight: bold;
            a:link,
            a:visited {
                color: var(--color-lighter);
                filter: none;
            }
            a:hover {
                filter: brightness(130%);
            }
        }

        #subtitlemenu {
            float: right;
        }

        li {
            font-size: initial;
            pointer-events: all;
        }

        #log {
            pointer-events: all;
        }

        #titlebackground {
            display: block;
        }
    }
}

#titlebackground {
    height: 2em;
    display: none;
    background-color: var(--color-med);
    position: fixed;
    width: 100%;
    z-index: -1;
    box-shadow: 0 4px 4px 4px var(--color-darker);

    &.topLogActive {
        height: 4.3em;
    }
}

#titlebar {
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
    color: var(--color-lighter);

    ul {
        padding: 0.2em 0;
        margin: 0.4em auto 0.6em auto;
    }

    font-size: 1.3em;
}

#titlemenu {
    a:link,
    a:visited {
        color: var(--color-lighter);
        filter: brightness(125%);
    }
    a:hover {
        color: var(--color-lighter);
        filter: brightness(130%);
    }
    li {
        padding: 0;
        margin: 0;
        @include pipe-separators;
    }
}

#subtitlemenu {
    font-size: 0.8em;

    li {
        padding: 0;
        margin: 0;
        @include pipe-separators;
    }
}

#contentMenu {
    overflow: hidden;
    min-height: 1.8em;

    ul {
        padding: 0;
        margin: 0;
    }

    li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: inline;
        //clear: both;
    }

    #tabList {
        float: left;
        position: fixed;
        margin-bottom: 0.4em;
        margin-left: 1em;
        box-shadow: 0 0 10px 10px var(--color-dark);
        background-color: var(--color-dark);
        z-index: 1; // Was there a reason for this? added randomly in e939c35c10dae2fb12ffda8e01de0e498e439c33
        // yes it was added to stop random ui elements from overlapping the tab list

        li {
            font-weight: bold;
            @include pipe-separators;
        }

        &:empty {
            box-shadow: none;
        }

        &.notFixed {
            position: static;
        }

        .newTab {
            a {
                &:link {
                    color: $color-discovery;
                    text-shadow: 0 0 0.8em $color-discovery-dark;
                }
                &:visited {
                    color: $color-discovery;
                    text-shadow: 0 0 0.8em $color-discovery-dark;
                }
                &:hover {
                    color: lighten($color-discovery, 10%);
                    text-shadow: 0 0 0.8em lighten($color-discovery-dark, 10%);
                }
                &:active {
                    color: lighten($color-discovery, 10%);
                    text-shadow: 0 0 0.8em lighten($color-discovery-dark, 10%);
                }
            }
        }
    }
}

#buyButtons {
    padding-left: 0px;
    li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: inline;
    }
}

#sidebar {
    float: left;
    text-align: left;
    width: $sidebar-width;
    background-color: var(--color-med);
    @extend .section;
    text-shadow: 0px 0px 2px #000000;
    @include box-shadow-inset(0, 0, 5px, 5px, var(--color-dark));

    #resourceTableContainer {
        //max-width: 23em;
        margin: 0;
        //overflow: auto;

        table {
            @extend .fill-available-width;
            margin: 0;
            background-color: var(--color-darker);
            border: 1px solid var(--color-lighter);
            padding: 0.5em;
            overflow: hidden;
            text-align: left;
            //table-layout: fixed;
            //display: block;
            //max-width: 90%;
            border-spacing: 0 0.1em;

            .highlightedIncome {
                background-color: var(--color-light);
            }

            .highlightedResource {
                background-color: var(--color-light);
            }

            h3 {
                padding: 0.2em;
                width: auto;
                margin: auto;
                font-size: 0.9em;
                color: var(--color-lighter), 20%;
                filter: brightness(120%);
                border-top: 0.1em dashed var(--color-lighter);
                border-bottom: 0.1em dashed var(--color-lighter);
                // background: #135;
                background: var(--color-dark);
                cursor: pointer;
                @include no-select();
            }
        }
    }

    td {
        font-size: 1.1em;
        padding: 0.1em;
        word-break: break-all;
        word-wrap: break-word;
        background-repeat: no-repeat;
        background-position: right;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    li {
        padding: 0.5em;
        margin: 0;
    }
}

#status {
    margin: 5px;
    padding: 0;
}

#log {
    overflow: hidden;
    /* overflow anchor fixes jittering!
    It disables scroll anchoring where chrome tries to help by scrolling the page */
    overflow-anchor: none;
    position: relative;

    li {
        display: block;
        padding-top: 0.1em;
        padding-bottom: 0.1em;
    }

    h3 {
        display: block;
        text-align: center;
    }

    .error {
        color: $color-error;
        text-shadow: 0 0 0.8em $color-error-bg;
    }

    .discovery {
        color: $color-discovery;
        text-shadow: 0 0 0.8em $color-discovery-dark;
    }

    #messageList {
        box-sizing: border-box;
        text-align: center;
        padding: 0;
        overflow-y: hidden;
        max-height: 9em;
        margin-top: 0;
        margin-bottom: 0;
        border-style: solid;
        border-width: 2px;
        background-color: var(--color-med);
        @include box-shadow-inset(0, 0, 2px, 2px, var(--color-dark));

        &.scrollable {
            overflow-y: auto;
        }

        &.forRightSide {
            overflow-y: auto;
            border-style: none;
            max-height: 39em;
            li {
                padding-top: 1em;
                padding-bottom: 1em;
                padding-left: 0.4em;
                padding-right: 0.4em;
            }
        }

        &.forLeftSide {
            overflow-y: auto;
            border-style: none;
            max-height: 30em;
            li {
                padding-top: 1em;
                padding-bottom: 1em;
                padding-left: 0.4em;
                padding-right: 0.4em;
            }
        }

        .evenMessage {
            background-color: var(--color-dark);
        }
    }
}

#rightLogContainer {
    float: right;
    width: 18%;
    background-color: var(--color-med);
    box-shadow: 0 0 5px 5px var(--color-dark) inset;
    overflow: clip;
}

#resource-numen {
    // fancier schmancier special rule
    text-shadow: 0 0 0.3em $color-numen, 0 0 0.6em $color-numen, 0 0 0.8em $color-numen;
}

#content {
    @extend .section;
    background-color: var(--color-med);
    @include box-shadow-inset(0, 0, 5px, 5px, var(--color-dark));
    padding: 0.5em;

    #helpButton {
        padding: 2px 5px 2px 5px;
    }
}

#tabMessage {
    @extend .inner-section;
    padding: 1.4em;
    background: repeat-x center;
    @include border-radius(0.5em);
    @include box-shadow-inset(0, 0, 30px, 30px, var(--color-med));
    text-shadow: 0 0 0.3em var(--color-dark);
}

#extraMessage {
    display: inline-block;
    width: 400px;
}

#buttonList {
    @extend .inner-section;
    padding: 1em;

    button {
        // disables mobile zooming on double tap except for safari
        // https://stackoverflow.com/questions/10614481/
        touch-action: manipulation;
    }

    &.homeScreen {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        ul {
            display: inline-block;
        }

        li {
            display: inline-block;
        }

        button {
            display: inline-block;
            margin: 0.4em;
            height: 10em;
            width: 12em;
        }
    }

    &.lab {
        width: 100%;
        button {
            width: 100%;
        }
    }
}

button.newlyDiscovered {
    @extend .gatewayButton;
    max-width: none;
}

#homeTabs {
    margin-bottom: 1em;

    ul {
        padding: 0;
        margin: 0;
    }

    li {
        @include pipe-separators;
    }

    .newItemAdded {
        a {
            &:link {
                color: $color-discovery;
                text-shadow: 0 0 0.8em $color-discovery-dark;
            }
            &:visited {
                color: $color-discovery;
                text-shadow: 0 0 0.8em $color-discovery-dark;
            }
            &:hover {
                color: lighten($color-discovery, 10%);
                text-shadow: 0 0 0.8em lighten($color-discovery-dark, 10%);
            }
            &:active {
                color: lighten($color-discovery, 10%);
                text-shadow: 0 0 0.8em lighten($color-discovery-dark, 10%);
            }
        }
    }
}

#buttonLeftContainer {
    float: left;
    width: 50%;
}

//////////////////////////////////////////////////////////////
// STATS
//////////////////////////////////////////////////////////////

#statsContainer {
    @extend .inner-section;
    padding: 1em;
}

.statsInnerContainer {
    table {
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 0.1em;
        border: 2px solid var(--color-lighter);
        border-collapse: collapse;
        background: var(--color-darker);
        //border-spacing: 0;
    }

    td {
        margin: 0.2em;
        font-size: 0.9em;
        padding: 0.4em;
    }
}

#statsUpperContainer {
    width: 100%;
    @extend .statsInnerContainer;
}

#statsLeftContainer {
    float: left;
    width: 50%;
    @extend .statsInnerContainer;
}

#statsRightContainer {
    float: right;
    width: 45%;
    @extend .statsInnerContainer;
}

#incomeData {
    padding: 0.1em 0.1em 1em;
    border-bottom: 0.1em dashed var(--color-lighter);
    text-shadow: 0px 0px 2px #000000;

    .oddRow {
        background: var(--color-darker);
    }
    .evenRow {
        background: var(--color-dark);
    }
    .essenceGlow {
        text-shadow: 0 0 1em $color-essence;
        background: var(--color-dark);
    }
}

#generalStats {
    .timeDisplay {
        font-style: italic;
        font-size: 110%;
    }
}

#disposeResource {
    padding: 0.1em 0.1em 0.5em;
    border-bottom: 0.1em dashed var(--color-lighter);
}

#upgradeList {
    float: right;
    text-align: left;
    margin: auto;
    width: 40%;
    padding: 0.2em 0.2em 0.2em 2em;
    border-left: 0.1em dashed var(--color-lighter);
    text-shadow: 0px 0px 2px #000000;

    ul {
        list-style-type: square;
        padding: 0;
        margin: 0;
        max-height: 600pt;
        overflow-y: auto;
    }

    li {
        padding: 0.5em 0.5em 0.5em 0.2em;
        margin: 0;
    }
}

//////////////////////////////////////////////////////////////
// RECYCLER
//////////////////////////////////////////////////////////////

#recyclerContainer {
    margin: 0 auto;
    overflow: hidden;
    max-width: 55em;

    > #inputButtons {
        float: left;
        margin: auto;
        width: 35%;
        text-shadow: 0px 0px 2px #000000;
    }

    > #junkDisplay {
        position: relative;
        float: left;
        margin: auto;
        width: 25%;
        background: $color-danger-darker url("../img/recyclerbg.png") center;
        color: lighten($color-danger-lighter, 30%);
        border: 0.2em solid $color-danger-lighter;
        @include box-shadow-inset(0, 0, 15px, 15px, $color-danger-darker);
        padding: 0.5em;
        text-shadow: 0px 0px 2px #000000;
    }

    > #outputButtons {
        float: left;
        margin: auto;
        width: 35%;
        text-shadow: 0px 0px 2px #000000;
    }

    #buyButtons {
        padding-left: 0px;
    }
}

//////////////////////////////////////////////////////////////
// MAIN I THINK
//////////////////////////////////////////////////////////////

#updateGameBox {
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    &:empty {
        display: none;
    }
}

button {
    background-color: var(--color-light);
    color: $color-text;

    @include border-radius(10px);
    border: 2px solid var(--color-lighter);

    padding: 10px;
    margin: 1% auto;
    cursor: pointer;
    display: block;
    min-width: 12em;
    @include no-select();
    text-shadow: 0px 0px 2px #000000;

    font-size: 100%;

    &.min {
        padding: 0.1em;
        margin: 0px 2px 3px;
        min-width: 0;
        display: inline;
        border-radius: 5px;
    }

    &.min-block {
        padding: 0.1em;
        margin: auto;
        min-width: 0;
        vertical-align: super;
        border-radius: 5px;
    }

    &.close-button {
        padding: 0 3.5px;
        margin: auto;
        float: right;
    }

    &:hover {
        //background-color: $highlight-color;
        //color: $super-highlight;
        @include box-shadow(0px, 0px, 2px, 2px, var(--color-lighter));
    }

    &:active,
    &.keep-button-pressed {
        background-color: var(--color-dark);
        color: var(--color-light);
        @include box-shadow-inset(0px, 3px, 7px, 7px, var(--color-darker));

        .medDesc {
            font-size: 80%;
            color: var(--color-lighter);
            filter: brightness(80%);
        }

        div {
            @include clear-box-shadow();
            background-color: var(--color-dark);
        }
    }

    &:focus {
        outline: 0;
    }

    &.disabled {
        background-color: var(--color-darker);
        color: var(--color-lighter);
        filter: brightness(80%);
        cursor: default;
        border-color: var(--color-med);

        &:hover {
            box-shadow: none;
        }

        &:active {
            box-shadow: none;
        }

        .medDesc {
            font-size: 80%;
            color: var(--color-lighter);
            filter: brightness(75%);
        }

        div {
            @include clear-box-shadow();
            background-color: var(--color-darker);
        }
    }
}

#custom-input {
    padding: 0.1em;
    margin: 0px 2px 3px;
    width: 6em;
    background-color: var(--color-light);
    border-color: var(--color-lighter);
    color: $color-text;
    font-size: 90%;

    &[disabled] {
        background-color: var(--color-darker);
        color: var(--color-lighter);
        filter: brightness(80%);
        cursor: default;
        border-color: var(--color-med);
    }
}

//////////////////////////////////////////////////////////////
// IMAGES AND PICTURES ETC
//////////////////////////////////////////////////////////////

.button-icon {
    background-color: var(--color-lighter);
    display: block;
    margin: 0 auto 0.4em auto;

    @include box-shadow(0, 0, 3px, 3px, var(--color-lighter));
    @include border-radius(5px);
    @extend .click-passthrough;
}

.gives-consumer {
    box-shadow: 0 0 3px 1px #f00 inset;
}

#tabSceneImage {
    display: block;
    margin: 0.1em auto 0.4em auto;
    @include border-radius(5px);
    @include box-shadow(0, 0, 5px, 5px, var(--color-dark));
}

#tabSceneImageRed {
    @extend #tabSceneImage;
    @include box-shadow(0, 0, 5px, 5px, $color-danger-dark);
}

#tabSceneImageEssence {
    @extend #tabSceneImage;
    @include box-shadow(0, 0, 5px, 5px, darken($color-essence, 30%));
}

#overlay {
    @include opacity(0.5);
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#idle-overlay {
    @include opacity(0.8);
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pointy {
    cursor: pointer;
}

.littleGeneralText {
    font-size: 10pt;
}

.smallDesc {
    font-size: 80%;
    color: var(--color-lighter);
    @extend .click-passthrough;
}

.smallDescAllowClicks {
    @extend .smallDesc;
    pointer-events: auto;
}

.medDesc {
    font-size: 80%;
    color: var(--color-lighter);
    filter: brightness(130%);
    @extend .click-passthrough;
}

.largeDesc {
    font-size: 125%;
    color: var(--color-lighter);
    filter: brightness(130%);
    @extend .click-passthrough;
}

.copyrightNotice {
    @include no-select;
    font-size: 80%;
    color: var(--color-lighter);
    filter: brightness(130%);
    position: static;
}

// PANE

#pane {
    background-color: var(--color-dark);
    @include box-shadow-inset(0, 0, 5px, 5px, var(--color-darker));
    filter: brightness(98%);
    @include border-radius(10px);
    padding: 1em 2em;
    margin: auto;
    overflow: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    @include translate(-50%, -50%);
    border: double var(--color-med);
    max-height: 90%;
    max-width: 90%;

    z-index: 11;

    h2 {
        padding-bottom: 0.5em;
    }

    #paneHeaderEnd {
        border-bottom: 0.5em double var(--color-med);
    }

    #paneHeaderTitleDiv {
        vertical-align: middle;
        display: inline;
        text-align: left;
        h3 {
            display: inline;
        }
    }

    #paneHeaderCloseButtonDiv {
        vertical-align: middle;
        text-align: right;
    }

    table {
        margin: auto;
        text-align: left;
    }

    .option-button {
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
        width: 4em;
    }

    .paneContentDiv {
        border-bottom: 0.4em double var(--color-med);
    }

    #changelogDiv {
        text-align: left;

        h3 {
            text-align: left;
        }
    }

    td.optionLabel {
        min-width: 12em;
        word-wrap: break-word;
    }

    #endCredits {
        font-size: 90%;
    }
}

// GATEWAY STUFF

.gateway {
    text-align: center;

    h1 {
        text-align: center;
        color: lighten($color-discovery, 10%);
    }

    h2 {
        text-align: center;
        color: $color-discovery;
    }

    h3 {
        text-align: center;
        color: $color-discovery;
    }

    h4 {
        text-align: center;
        color: $color-discovery;
    }

    .medDesc {
        color: lighten($color-discovery-dark2, 30%);
    }

    .smallDesc {
        color: $color-discovery;
    }
}

.gatewayButton {
    background-color: $color-discovery-dark3;
    border-color: $color-discovery;
    max-width: 16em;

    div {
        background-color: $color-discovery-dark;
        @include box-shadow(0, 0, 3px, 3px, $color-discovery-dark);
    }

    &:hover {
        //background-color: $highlight-color;
        //color: $super-highlight;
        @include box-shadow(0px, 0px, 2px, 2px, $color-discovery);
    }

    &:active {
        background-color: $color-discovery-dark4;
        color: $color-discovery-dark;
        @include box-shadow-inset(0px, 3px, 7px, 7px, $color-discovery-dark3);

        .medDesc {
            color: darken($color-discovery, 10%);
        }

        div {
            background-color: $color-discovery-dark3;
            @include clear-box-shadow();
        }
    }

    &.disabled {
        background-color: $color-discovery-dark4;
        color: lighten($color-discovery-dark3, 10%);
        border-color: lighten($color-discovery-dark3, 10%);

        .medDesc {
            color: darken($color-discovery-dark, 15%);
        }

        div {
            background-color: $color-discovery-dark4;
            @include clear-box-shadow();
        }
    }

    &.respecMode {
        box-shadow: 0 0 6px lighten($color-discovery, 15%) inset;
        background-color: $color-discovery-dark2;
    }
}

.gateway button,
button.gateway {
    @extend .gatewayButton;
}

#pane.gateway {
    @include border-radius(3em);
    background-color: $color-discovery-dark3;
    @include box-shadow(0, 0, 2em, 2em, $color-discovery-dark3);
    border: none;

    #paneHeaderEnd,
    .paneContentDiv {
        border-bottom: none;
    }

    #treeCanvas {
        @include border-radius(10px);
        @include box-shadow(0, 0, 5px, 5px, $color-discovery);
        width: 800px;
        height: 600px;
    }
}

#overlay.gateway {
    @include opacity(1);
    background-color: $color-discovery-dark4;
}

.gateway .essenceCount {
    color: darken($color-essence, 20%);
    text-shadow: 0 0 0.6em darken($color-essence, 20%);
}

.gateway .essenceCountBrighter {
    color: lighten($color-essence, 5%);
    text-shadow: 0 0 0.6em lighten($color-essence, 5%);
}

.gateway .numenCount {
    color: $color-numen;
    text-shadow: 0 0 0.3em $color-numen, 0 0 0.6em $color-numen, 0 0 0.8em $color-numen;
}

.gatewayButtonList {
    list-style-type: none;
    display: inline-block;

    button {
        display: inline-block;
        margin: 0.2em;
    }
}

.gatewayPropertyList {
    list-style-type: none;
    padding-left: 0;
    li {
        padding-left: 0;
    }
}

#planetContainer {
    text-align: center;
    margin: 0.5em auto;
    padding: 0.5em;
}

.gateway ::selection {
    background-color: $color-discovery-dark4;
}

.gateway ::-moz-selection {
    background-color: $color-discovery-dark4;
}

#aspectList {
    margin: 0.5em auto;
}

#aspectTable {
    border-spacing: 0;
    tr:nth-child(6n + 1),
    tr:nth-child(6n + 2),
    tr:nth-child(6n + 3) {
        td {
            background-color: $color-discovery-dark2;
        }
    }
}

.aspectDiv {
    display: inline-block;
    vertical-align: middle;

    @include border-radius(0.5em);
    background-color: $color-discovery-dark3;
    @include box-shadow(0, 0, 0.5em, 0.5em, $color-discovery-dark3);
    padding: 0.2em;
    margin: 1.5em;
    max-width: 14em;

    .gatewayButton {
        @include box-shadow(0, 0, 3px, 3px, $color-discovery-dark);
    }
}

.disabledAspectDiv {
    display: inline-block;
    vertical-align: middle;

    @include border-radius(0.5em);
    background-color: $color-discovery-dark4;
    @include box-shadow(0, 0, 0.5em, 0.5em, $color-discovery-dark4);
    padding: 0.2em;
    margin: 1.5em;
    max-width: 14em;

    .gatewayButton {
        @include box-shadow(0, 0, 3px, 3px, $color-discovery-dark2);
    }
}

.planetDisplay {
    @include border-radius(50px);
    background-color: $color-discovery-dark;
    @include box-shadow(0, 0, 3px, 3px, $color-discovery-dark);
    margin: 0 auto;
}

button.planetButton {
    background-color: transparent;
    border: none;
    padding: 20px;
    max-width: 14em;
    margin: 0.8em;

    div {
        @include border-radius(50px);
    }

    &:hover {
        text-shadow: 0 0 0.3em lighten($color-discovery, 5%), 0 0 0.6em lighten($color-discovery, 10%), 0 0 0.9em lighten($color-discovery, 15%);
        @include clear-box-shadow();

        div {
            @include box-shadow(0, 0, 0.4em, 0.4em, $color-discovery);
        }
    }

    &:active {
        @include clear-box-shadow();
    }
}

#gatewayVoiceMessage {
    font-size: 1.25em;
}

.tooltip {
    display: block;
    background-color: var(--color-light);
    color: #fff;
    text-align: center;
    border-style: solid;
    border-color: var(--color-lighter);
    border-width: 5px;
    border-radius: 8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    min-width: 200px;
    position: fixed;
    z-index: 40;
    opacity: 1;
    transition: opacity 0.3s;
    text-shadow: 0px 0px 3px #000000;
    font-size: 1.2rem;

    &:empty {
        opacity: 0;
        transition: opacity 0s;
    }

    .littleTooltipText {
        font-size: 0.6em;
    }

    &.gives-consumer {
        box-shadow: 0 0 3px 1px #f00 inset;
    }
}

.forHomeButtonOrGrotto {
    width: 250px;
}

.forIncomeTable {
    width: auto;
}

.forAspectTree {
    width: 300px;
    background-color: darken($color-discovery-dark3, 10%);
    border-color: $color-discovery-dark4;
    &Unpurchased {
        background-color: $color-discovery-dark4;
        border-color: darken($color-discovery-dark4, 5%);
    }
    &Affordable {
        background-color: $color-discovery-dark3;
        border-color: $color-discovery-dark2;
    }
}

.hrForTooltipJuxtaposition {
    border: 0;
    border-top: 2px solid var(--color-lighter);
}

.hrForTooltipSeparation {
    border: 0;
    border-top: 2px dashed var(--color-lighter);
}

.hrForTooltipSeparationInGateway {
    border: 0;
    border-top: 2px dashed white;
}

.hrForTooltipJuxtapositionInGateway {
    border: 0;
    border-top: 2px solid white;
}

.collapser {
    padding-right: 1em;
    padding-left: 0.7em;
}

.disposeArrangement {
    ul {
        display: inline-block;
    }

    li {
        display: inline-block;
    }

    button {
        display: inline-block;
        margin: 0.4em;
        max-width: 12em;
        min-width: 9em;

        &.newlyDiscovered {
            max-width: 12em;
            min-width: 9em;
        }
    }

    #buyButtons {
        button {
            margin: 0 2px 3px;
            min-width: 0;
        }
    }
}

#cheatsDisplay {
    width: 50%;
}

#leftButtons {
    float: left;
    width: 50%;

    .up-down {
        display: flex;
        width: 12em;
        margin: 1% auto;
        overflow: hidden;
        font-size: 90%;

        .up-downText {
            margin: auto;
        }

        .up-downButtonContainer {
            float: right;
            max-width: 1.5em;
        }
    }
}

#rightButtons {
    float: right;
    width: 50%;

    .up-down {
        display: flex;
        width: 12em;
        margin: 1% auto;
        overflow: hidden;
        font-size: 90%;

        .up-downText {
            margin: auto;
        }

        .up-downButtonContainer {
            float: right;
            max-width: 1.5em;
        }
    }
}

.token {
    margin: 0.5em 0 0.5em 0.5em;
}

#token-div {
    display: flex;
}

#minute-hand-toggle {
    &.disabled {
        text-shadow: none;
    }
    color: #fff;
    border-color: $color-discovery-dark3;
    background: $color-discovery-dark4;

    &.minuteOn {
        box-shadow: 0 0 4px $color-discovery;
        border-color: $color-discovery-dark2;
        background: $color-discovery-dark3;

        &.power1 {
            box-shadow: 0 0 6px lighten($color-discovery, 5%);
            border-color: $color-discovery-dark2;
            background: lighten($color-discovery-dark3, 5%);
        }

        &.power2 {
            box-shadow: 0 0 6px lighten($color-discovery, 5%);
            border-color: $color-discovery-dark2;
            background: lighten($color-discovery-dark3, 10%);
        }

        &.power3 {
            box-shadow: 0 0 7px lighten($color-discovery, 10%);
            border-color: $color-discovery-dark;
            background: $color-discovery-dark2;
        }

        &.power4 {
            box-shadow: 0 0 8px lighten($color-discovery, 15%);
            border-color: $color-discovery;
            background: lighten($color-discovery-dark2, 5%);
        }

        &.power5 {
            box-shadow: 0 0 9px lighten($color-discovery, 20%);
            border-color: lighten($color-discovery, 15%);
            background: $color-discovery-dark;
        }
    }

    &.disabled {
        border-color: $color-discovery-dark4;
    }
}

.minuteOn {
    color: #fff;
    text-shadow: 0 0 0.6em $color-numen;
}

.minuteOff {
    color: #fff;
}

.bigSpeedHeader {
    font-size: 2em;
}

.speedButtons {
    display: flex;

    button {
        margin: 1em;
        width: 6em;
        height: 17em;
    }
}

#aspectInnerWarning {
    padding-top: 1em;
    padding-bottom: 1em;
}

.reflectionText {
    color: white;
}

#token-div {
    background-color: var(--color-light);
    box-shadow: 0 1px 3px #fff;
}

.reminderShadow {
    box-shadow: 0 0 3em white;
}

#minute-hand-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#pause-toggle {
    margin-left: 1em;
    color: #fff;
    border-color: $color-discovery-dark3;
    background: $color-discovery-dark4;

    &.on {
        box-shadow: 0 0 6px lighten($color-discovery, 5%);
        border-color: $color-discovery-dark2;
        background: lighten($color-discovery-dark3, 10%);
    }
}

#minute-slider {
    background: $color-discovery-dark4;
    border-style: dashed;
    border-color: $color-discovery-dark3;

    &.power1 {
        background: lighten($color-discovery-dark4, 5%);
        border-color: lighten($color-discovery-dark3, 5%);
        box-shadow: 0 0 6px $color-discovery-dark2;
    }

    &.power2 {
        background: $color-discovery-dark3;
        border-color: $color-discovery-dark2;
        box-shadow: 0 0 8px $color-discovery;
    }

    &.power3 {
        background: $color-discovery-dark2;
        border-color: $color-discovery-dark;
        box-shadow: 0 0 10px $color-discovery;
    }

    &.power4 {
        background: $color-discovery-dark;
        border-color: $color-discovery;
        box-shadow: 0 0 12px $color-discovery;
    }

    &.power5 {
        background: $color-discovery;
        border-color: lighten($color-discovery, 15%);
        box-shadow: 0 0 15px $color-discovery;
    }
}

#minute-time {
    margin-bottom: 1rem;

    &.noTime {
        color: #555;
    }
}

#minute-row-two {
    display: flex;
    flex-wrap: wrap;
}

.front {
    z-index: 30;
}

.inGateway {
    visibility: hidden;

    #overlay {
        visibility: visible;
    }
}

.can-afford-aspect {
    text-shadow: 0 0 0.6em #ace3d1;
}

#visitButtons {
    margin: 1em 0;
}

#keybindTable {
    td {
        padding: 0.2rem;
    }
}

#keybind-overlay-container {
    float: left;
    margin-left: 1rem;
}

select {
    background-color: var(--color-darker);
    color: inherit;
    border: none;
    outline: none;
    font-size: inherit;
    text-align: right;
    text-align-last: right;

    .evenMessage {
        background-color: var(--color-dark);
    }
}

option {
    direction: rtl;
}
